<template>
	<view class="container">
		<navigation-custom :config="config" :scrollTop="scrollTop" @customConduct="customConduct" :scrollMaxHeight="scrollMaxHeight" />
		<view class="header">
			<text style="font-size: 26rpx; color: #808080">您需支付</text>
			<text class="total-price">¥ {{ payPrice }}</text>
		</view>

		<view class="payment-type">
			<view v-for="(payType, index) in paymentTypes" :key="index" class="payment-item">
				<text :class="payType.icon" class="icon"></text>
				<text class="type">{{ payType.type }}</text>
				<text class="iconfont icon-duihao selected" v-if="paymentType == index" @tap="selectType(index)"></text>
				<text v-else class="nselected" @tap="selectType(index)"></text>
			</view>
		</view>

		<view class="payment-box">
			<text class="payment" @tap="pay">{{ paymentTypes[paymentType].type }}¥{{ payPrice }}</text>
		</view>
	</view>
</template>

<script>
import { prepayOrder, paySuccess, payFail, payForBalance } from '@/api/order';
import { mapGetters } from 'vuex';
export default {
	onLoad(params) {
		this.payPrice = parseFloat(params.payPrice).toFixed(2);
		this.orderId = params.orderId;
		console.log(params.orderId, this.orderId);
	},
	data() {
		return {
			config: {
				title: '收银台',
				back: false
			},
			payPrice: 0,
			orderId: 0,
			paymentTypes: [
				{
					icon: 'iconfont icon-weixinzhifu',
					type: '微信支付',
					selected: true
				},
				{
					icon: 'iconfont icon-yuezhifu',
					type: '余额支付',
					selected: false
				}
			],
			paymentType: 0
		};
	},
	computed: {
		...mapGetters(['appId'])
	},
	methods: {
		selectType(index) {
			if (index == this.paymentType) {
				return;
			}
			this.paymentType = index;
		},
		async pay() {
			if (this.paymentType == 0) {
				const res = await prepayOrder(this.orderId, this.appId);
				if (res.code === 200) {
					this.handlePay(res.data);
					return;
				}
				if (res.code == 0) {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000,
						mask: true
					});
				}
				setTimeout(function () {
					uni.reLaunch({
						url: '/pages/user/order/order_list?orderStatus=4'
					});
				}, 2000);
			} else if (this.paymentType == 1) {
				const res = await payForBalance(this.orderId);
				if (res.code === 200) {
					uni.showToast({
						title: '支付成功',
						icon: 'none',
						duration: 2000,
						mask: true
					});
					uni.reLaunch({
						url: '/pages/user/order/order_list?orderStatus=2'
					});
					return;
				}
				if (res.code == 0) {
					uni.showModal({
					    title: res.msg,
					    content: '请确认是否去充值？',
					    success: function(res) {
							if (res.confirm) {
								uni.reLaunch({
									url: '/pages/user/service/user_recharge/user_recharge'
								});
							} else if (res.cancel) {
								return
							}
					    }
					});
				}
			}
		},
		handlePay(payInfo) {
			console.log(payInfo);
			uni.getProvider({
				service: 'payment',
				success: (res) => {
					console.log(res.provider);
					if (~res.provider.indexOf('wxpay')) {
						uni.requestPayment({
							provider: 'wxpay', //固定值为"wxpay"
							orderInfo: 'orderInfo',
							timeStamp: payInfo.timeStamp,
							nonceStr: payInfo.nonceStr,
							package: payInfo.package,
							signType: payInfo.signType,
							paySign: payInfo.paySign,

							success: async (res) => {
								// var rawdata = JSON.parse(res.rawdata);
								console.log('支付成功', res, this.orderId);
								await paySuccess(this.orderId);
								uni.reLaunch({
									url: '/pages/user/order/order_list?orderStatus=2'
								});
							},
							fail: async (err) => {
								console.log('支付失败:' + JSON.stringify(err));
								// 正在支付中  ---> 待付款
								await payFail(this.orderId);
								uni.reLaunch({
									url: '/pages/user/order/order_list?orderStatus=2'
								});
							}
						});
					}
				}
			});
		}
	}
};
</script>

<style scoped lang="less">
@theme-color: #ff5a14;

.container {
	background-color: #fff;
}

.header {
	width: 100%;
	height: 25%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	.total-price {
		font-size: 90rpx;
		font-weight: 500;
		color: #ff4444;
	}
}

.payment-type {
	border-top: 1rpx solid #f6f7f8;
	border-bottom: 1rpx solid #f6f7f8;

	.payment-item {
		display: flex;
		padding: 20rpx 30rpx;

		.icon {
			color: #00c800;
			font-size: 40rpx;
		}

		.type {
			margin-left: 20rpx;
			font-size: 28rpx;
			flex: 1;
		}

		.selected {
			color: #fff;
			background-color: @theme-color;
			padding: 5rpx;
			border-radius: 50%;
		}

		.nselected {
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			border: 1rpx solid #ccc;
		}
	}
}

.payment-box {
	position: absolute;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 150rpx;
	padding: 0 10%;
	text-align: center;
	color: #fff;

	.payment {
		display: block;
		width: 100%;
		background-color: @theme-color;
		padding: 25rpx 0;
		border-radius: 50rpx;
	}
}
</style>
